<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main Page</title>
  <style>
    body {
      display: flex;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .sidebar {
      width: 200px;
      height: 150vh;
      background-color: #333;
      color: #fff;
      padding: 20px;
      box-sizing: border-box;
    }
    .sidebar a {
      display: block;
      color: #fff;
      text-decoration: none;
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
    }
    .sidebar a:hover {
      background-color: #575757;
    }
    .dropdown-content {
      display: none;
      background-color: #444;
      margin: 10px 0;
    }
    .dropdown-content a {
      color: yellow;
      padding: 10px;
      text-decoration: none;
      display: block;
      border-radius: 5px;
      background-color: #555;
    }
    .dropdown-content a:hover {
      background-color: #666;
    }
    .content {
      flex-grow: 1;
      padding: 20px;
    }
    iframe {
      width: 100%;
      height: 100vh;
      border: none;
    }
    .header {
      width: calc(100% + 40px);
      height: 80px;
      background-color: #333;
      position: relative;
      border: 2px solid #423f3f;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      left: -20px;
      top: -20px;
    }
    .header nav {
      display: flex;
      flex-grow: 1;
    }
    .header nav a {
      color: #fff;
      text-decoration: none;
      padding: 0 15px;
      line-height: 80px;
      display: flex;
      align-items: center;
    }
    .header nav a:hover {
      background-color: #444;
    }
    .header .user-info {
      color: #fff;
      margin-right: 20px;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
      z-index: 1;
    }
    .dropdown-content a {
      color: #ffffff;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    .dropdown-content a:hover {
      background-color: #c3a6a6;
    }
    .dropdown.show .dropdown-content {
      display: block;
    }
    .dropdown-btn {
      background-color: #1abc9c;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    .dropdown-btn:after {
      content: '\25BC';
      margin-left: 10px;
      font-size: 12px;
    }
    .sub-dropdown-content {
      display: none;
      background-color: #444;
      margin: 10px 0;
    }
    .sub-dropdown-content a {
      color: yellow;
      padding: 10px;
      text-decoration: none;
      display: block;
      border-radius: 5px;
      background-color: #555;
    }
    .sub-dropdown-content a:hover {
      background-color: #666;
    }
  </style>
</head>
<body>
<div class="sidebar">
  <a href="course.jsp" target="contentFrame">课程管理</a>
  <a href="score.jsp" target="contentFrame">分数管理</a>
  <a href="../student_select.jsp" target="contentFrame">自助选课</a>
  <a class="dropbtn" onclick="toggleDropdown(event)">项目管理</a>
  <div id="dropdownContent" style="display:none; background-color:#434343">
    <a href="../student_querynoproject.jsp" style="background-color:#777474;color:yellow;" target="contentFrame">参加项目</a>
    <a href="../student_createProject.jsp" style="background-color:#777474; color:yellow ; margin-top:10px" target="contentFrame">申报项目</a>
    <a class="dropbtn-sub" onclick="toggleSubDropdown(event)" style="background-color:#777474 ; color:yellow; margin-top:10px">我的项目</a>
    <div id="subDropdownContent" class="sub-dropdown-content" style="display:none;">
      <a href="../sutdenr_Audits.jsp" style="background-color:white;color:black; width:70%;margin-left: 10px;" target="contentFrame">申请审核中</a>
      <a href="../student_AdultProject.jsp" style="background-color:white;color:black; width:70%;margin-left: 10px;" target="contentFrame">项目审核中</a>
      <a href="student_RejectProject.jsp" style="background-color:white;color:black; width:70%;margin-left: 10px;" target="contentFrame">项目被驳回</a>
      <a href="student_enteredProject.jsp" style="background-color:white; color:black;width:70%;margin-left: 10px" target="contentFrame">进行中</a>
      <a href="studnet_Myproject.jsp" style="background-color:white; color:black;width:70%;margin-left: 10px" target="contentFrame">已创建</a>
    </div>
  </div>
  <a id="accountManagement" href="../student_my.jsp" target="contentFrame">我的</a>
</div>

<div class="content">
  <div class="header">
    <nav>
      <a href="#">首页</a>
      <a href="#">界面管理</a>
      <a href="#">栏目管理</a>
      <a href="#">内容管理</a>
      <a href="#">用户管理</a>
      <a href="#">论坛中心</a>
      <a href="#">应用中心</a>
      <a href="#">工具</a>
    </nav>
    <div class="dropdown">
      <button class="dropdown-btn" style="font-size: 20px;color: #ffffff;letter-spacing:1px" onclick="logout()">退出</button>
<%--        <a href="#" onclick="logout()">退出</a>--%>
    </div>
  </div>

  <iframe name="contentFrame" src="course.jsp"></iframe>
</div>

<script>
  function toggleDropdown1() {
    document.querySelector('.dropdown .dropdown-content').classList.toggle('show');
  }

  function toggleDropdown(event) {
    var dropdownContent = document.getElementById('dropdownContent');
    if (dropdownContent.style.display === 'block') {
      dropdownContent.style.display = 'none';
    } else {
      dropdownContent.style.display = 'block';
    }
    event.stopPropagation();
  }

  function toggleSubDropdown(event) {
    var subDropdownContent = document.getElementById('subDropdownContent');
    if (subDropdownContent.style.display === 'block') {
      subDropdownContent.style.display = 'none';
    } else {
      subDropdownContent.style.display = 'block';
    }
    event.stopPropagation();
  }

  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn-sub') && !event.target.matches('#dropdownContent a')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      for (var i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.style.display === 'block') {
          openDropdown.style.display = 'none';
        }
      }
      var subDropdowns = document.getElementsByClassName("sub-dropdown-content");
      for (var i = 0; i < subDropdowns.length; i++) {
        var openSubDropdown = subDropdowns[i];
        if (openSubDropdown.style.display === 'block') {
          openSubDropdown.style.display = 'none';
        }
      }
    }
  }

  function logout() {
    window.location.href = '${pageContext.request.contextPath}/logout';
  }
</script>
</body>


</html>
